<template>
  <div>
    <div style="margin-bottom: 10px;" class="btn-group">
      <div>
        <el-button type="primary" @click="search">查询</el-button>
        <el-button type="primary" @click="add">新增</el-button>

      </div>
    </div>
    <lb-table
      ref="lbTable"
      v-el-height-adaptive-table="{bottomOffset:10}"
      border
      highlight-current-row
      element-loading-text="加载中"
      :column="tableData.column"
      :data="tableData.data"
      pagination
      :total="tableData.total"
      custom-column
      @fetch="fetchData"
    />
    <addkeys ref="addkeys" @Refresh="Refresh" />
  </div>
</template>

<script>
  import { CmsSpecialKeyWords, CmsSpecialKeysDelete } from '@/api'
  export default {
    name: 'key',
    components: {
      addkeys: require('./addkeys.vue').default
    },
    data() {
      return {
        keyStatusMap: [{ 'value': 1, 'desc': '未启用', 'key': 'CLOSE' }, { 'value': 2, 'desc': '已启用', 'key': 'OPEN' }, { 'value': -1, 'desc': '已作废', 'key': 'DELETE' }],
        tableData: {
          total: 0,
          column: [
            { label: '关键字', prop: 'keyName', width: 120, align: 'center' },
            { label: '状态', prop: 'keyStatus', width: 120, align: 'center',
              render: (h, { row, column }) => <span>{this.keyStatusMap.find(l => l.value === row.keyStatus).desc }</span>
            },
            { label: '创建人', prop: 'createUser', width: 240, align: 'center' },
            { label: '操作', prop: 'op', width: 150, align: 'center',
              render: (h, { row, $index }) => {
                return (
                 <div>
                    <el-link size='mini' onClick={() => this.edit(row)}>
                      {row.keyStatus === -1 ? '' : '编辑'}
                    </el-link>
                    <el-link size='mini' onClick={() => this.del(row) } >
                      {row.keyStatus !== -1 ? '作废' : ''}
                    </el-link>
                  </div>
                )
              }
            }
          ],
          data: []
        }
      }
    },
    methods: {
      search() {
        this.fetchData({})
      },
      add() {
        this.$refs.addkeys.open()
      },
      edit(row) {
        this.$refs.addkeys.open(row)
      },
      del(row) {
        CmsSpecialKeysDelete({ keyId: row.keyId })
      },
      Refresh() {
        this.fetchData({})
      },
      // CmsSpecialKeyWords
      async fetchData({ currentPage = 1, pageSize = 20 }) {
        const query = {
          currentPage,
          pageSize
        }
        const res = await CmsSpecialKeyWords(query)
        // this.tableData.data = res.data.rows
        this.tableData.data = res.data.rows
        if (currentPage === 1) this.tableData.total = res.data.total
      }
    }
  }
</script>

<style scoped>

</style>
